<!-- CustomCheckbox -->
<template>
	<view class="cc-form-checkbox-wrap">
		<view @tap.stop="toggleCheck" class="cc-form-checkbox__inner" :class="['cc-form-checkbox__inner--'+innerShape]"
			:style="{width:innerSize+4+'px',height:innerSize+4+'px',backgroundColor:innerBackgroundColor,borderColor:innerBorderColor}">
			<uni-icons v-if="isChecked" type="checkmarkempty" :size="innerSize"
				:color="isDisabled?'#c8c9cc':'#fff'"></uni-icons>
		</view>

		<text v-if="$slots.default" class="cc-form-checkbox__label" :style="checkboxLabelStlye">
			<slot></slot>
		</text>
	</view>
</template>

<script>
	import mixin from "@/cc-ui-tools/libs/mixin/mixin.js";
	export default {
		name: 'cc-from-checkbox',
		emits: ['update:checked', 'change'],
		mixins: [mixin],
		props: {
			// 形状：square（方形）或 circle（圆形）
			shape: {
				type: String,
				default: 'square',
				validator: (val) => ['square', 'circle'].includes(val)
			},
			value: {
				type: [String, Number, Boolean],
				default: null
			},
			disabled: {
				type: Boolean,
				default: false
			},
			size: {
				type: Number,
				default: 16
			},
			primaryColor: {
				type: String,
				default: '#007AFF'
			},
			labelStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			clearable: {
				type: Boolean,
				default: false
			},
			checked: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			isGroup() {
				let parent = this.getParent()
				if (parent) {
					return true
				}
				return false
			},

			isChecked() {
				// 优先从父组件获取选中状态
				if (this.isGroup) {
					return this.getParent().innerValue.includes(this.value);
				}
				return this.checked
			},

			isDisabled() {
				if (this.isGroup) {
					return this.parentData.disabled || this.disabled
				}
				return this.disabled
			},
			
			innerShape() {
				if (this.isGroup) {
					return this.parentData.shape || this.shape
				}
				return this.shape
			},

			innerSize() {
				if (this.isGroup) {
					return this.parentData.size || this.size
				}
				return this.size
			},

			innerBackgroundColor() {
				if (this.isDisabled) {
					return '#ebedf0'
				}
				if (this.isChecked) {
					if (this.isGroup) {
						return this.parentData.primaryColor || this.primaryColor
					}
					return this.primaryColor
				}
				return '#fff'
			},

			innerBorderColor() {
				if (this.isDisabled) {
					return '#c8c9cc'
				}
				if (this.isChecked) {
					if (this.isGroup) {
						return this.parentData.primaryColor || this.primaryColor
					}
					return this.primaryColor
				}
				return '#c8c9cc'
			},

			checkboxLabelStlye() {
				let cclabelStyle = this.labelStyle;
				if (this.isGroup) {
					cclabelStyle = this.parentData.labelStyle || this.labelStyle
				}
				let labelStyle = Object.assign({}, cclabelStyle || {})
				let arr = Object.keys(labelStyle).map((key) => {
					if (key === 'color' && this.disabled) {
						return null
					}
					return `${key}:${labelStyle[key]}`
				}).filter((v) => v)
				return arr.join(';')
			},
		},
		data() {
			return {
				// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
				// 故只能使用如此方法
				parentData: {
					shape: 'circle',
					disabled: null,
					primaryColor: null,
					labelStyle: null,
					size: 16,
				},
			}
		},
		mounted() {
			this.init()
		},
		methods: {

			init() {
				let parent = this.getParent()				
				if (!parent) return;

				if (parent.children) {
					// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
					parent.children.indexOf(this) === -1 && parent.children.push(this)
				}
				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
				Object.keys(this.parentData).map((key) => {
					this.parentData[key] = parent[key]
				})
			},

			// 获取父组件
			getParent() {
				let parent = this.$cc.$parent.call(this, "cc-form-checkbox-group")
				return parent;
			},

			// 单击事件
			toggleCheck(e) {
				if (this.isDisabled) {
					return;
				}
				let parent = this.getParent()
				if (parent) {
					parent.toggleCheckbox(this.value);
				} else {
					this.$emit('update:checked', !this.isChecked)
					this.$emit('change', this.isChecked)
				}
			},

			// 阻止事件冒泡
			preventEvent(e) {
				e && e.stopPropagation && e.stopPropagation()
			},
		}
	}
</script>

<style scoped>
	.cc-form-checkbox-wrap {
		margin-top: 1px;
		display: inline-flex;
		flex-direction: row;
		vertical-align: middle;
		align-items: center;
	}

	.cc-form-checkbox__label {
		font-size: 16px;
		margin-left: 8px;
		color: #333;
	}

	.cc-form-checkbox__inner {
		border-width: 1px;
		border-style: solid;
		background-color: #fff;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cc-form-checkbox__inner--circle {
		border-radius: 50%;
	}
</style>